vue自定义组件的几种方式

2023-08-27 13:25| 来源: 网络整理| 查看: 265

1.全局组件

定义方式示例：

Vue.component("hello-component", { props: ["message"], template: "组件定义之全局组件{{message}}" });

使用：

属性介绍： Vue.component()：是vue.js内部封装方法 “hello-component”：是使用时候的组件名称 props：组件内的属性，供给组件内部传值 template：组件内部DOM元素组成全局组件定义方式，是直接给全局对象Vue注册了一个组件。在本页内已挂载Vue 实例的DOM目标元素都可以使用（区别于局部组件只能是挂载哪一个DOM，哪个才能使用）。

2.局部组件

定义方式示例：

var limitComponent = { props: ["message"], template: "{{message}}" } new Vue ({ el: "#app", components: { "child-component": limitComponent } });

使用：

属性介绍：

el：是 Vue 实例的挂载目标 “components”：是注册仅在其作用域中可用的组件 “child-component”：组件的名称（书写规则请上翻再看规则） limitComponent：通过对象方式传递组件你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件； js中用反斜线“\”实现字符串换行；

3.Script方式注册组件

定义方式示例：

自定义组件之script方式定义 {{message}} Vue.component("mymac", { props: ["message"], template: "#script-component" }) var newVue = new Vue({ el: "#mac", data: { mydata: "春暖花开" } }); ``` 使用： ```html

4.创建组件

定义方式示例：

{{message}} Vue.component('templatec', { props: ["message"], template: "#cc" }) new Vue({ el: "#MyTemp" }) ``

【本文地址】

公司简介

联系我们